---
import { cn } from '~/lib/utils'
import type { SkillData, Skill } from '~/types'

interface Props {
  skillsData: SkillData[]
}

const { skillsData }: Props = Astro.props

const duplicateSkills = (skills: Skill[]) => [...skills, ...skills, ...skills, ...skills]
---

<div class="relative py-2 px-2 max-md:px-0">
  {
    skillsData.map((row: SkillData) => {
      const duplicatedSkills = duplicateSkills(row.skills)
      return (
        <div class="relative w-full overflow-hidden my-4 group">
          <div
            class={cn(
              'flex w-max will-change-transform',
              row.direction === 'right' ? 'animate-[scroll-reverse_30s_linear_infinite]' : 'animate-[scroll_30s_linear_infinite]',
              'group-hover:[animation-play-state:paused]',
              'safari-only'
            )}
            style="transform: translateZ(0); -webkit-transform: translateZ(0);"
          >
            {duplicatedSkills.map((skill) => (
              <div class="safari-item group flex items-center gap-2 px-5 py-2 mx-2 rounded-full border border-border bg-accent text-foreground whitespace-nowrap hover:bg-tag-bg-hover dark:shadow-md">
                <span class={cn('flex items-center justify-center w-5 h-5', skill.icon)} />
                <span class="font-sans text-sm font-medium">{skill.name}</span>
              </div>
            ))}
          </div>
        </div>
      )
    })
  }
  <!-- <div class="pointer-events-none absolute left-0 top-0 w-[25%] h-full z-50 bg-gradient-to-r from-background to-transparent"></div>
  <div class="pointer-events-none absolute right-0 top-0 w-[25%] h-full z-50 bg-gradient-to-l from-background to-transparent"></div> -->
</div>

<style is:global>
  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
    }
  }

  @keyframes scroll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
    }
  }

  @-webkit-keyframes scroll-reverse {
    0% {
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes scroll-reverse {
    0% {
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  /* Safari 优化 */
  .safari-only {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .safari-item {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Chrome 优化 */
    contain: layout style paint;
    will-change: transform;
  }
</style>
<script>
  function adjustAnimationSpeed() {
    const tracks = document.querySelectorAll<HTMLElement>('.flex.w-max')
    const screenWidth = window.innerWidth
    const baseSpeed = 30
    const speedFactor = Math.max(0.6, Math.min(1.8, screenWidth / 1000))
    const newDuration = `${baseSpeed * speedFactor}s`

    tracks.forEach((track) => {
      track.style.animationDuration = newDuration
    })
  }

  // 监听事件
  window.addEventListener('before-swap', adjustAnimationSpeed)
</script>
